<template>
	<view>
		<view style="width: 100%;height: 400rpx;text-align: center;" @click="chooseImg">
			<view v-if="activityRequest.avatar==null"
				style="width: 100%;height: 100%;background-color: #DCDFE6;display: flex;justify-content: center;align-items: center;">
				点击上传新闻标题</view>
			<img v-else style="width: 100%;height: 100%;width: 96%;margin-top: 2%;" :src="activityRequest.avatar"
				alt="">
		</view>
		<uni-forms style="margin-top: 40rpx;display: flex;justify-content: center;" :value="activityRequest" ref="form">
			<uni-forms-item name="activityName">
				<uni-easyinput type="text" v-model="activityRequest.activityName" placeholder="请输入活动名称" />
			</uni-forms-item>
			<uni-forms-item name="activityAddress">
				<uni-easyinput type="text" v-model="activityRequest.activityAddress" placeholder="请输入活动地址" />
			</uni-forms-item>
			<uni-forms-item label="所需经费">
				<uni-easyinput type="number" v-model="activityRequest.funds" placeholder="默认为0,不输也为0,单位:元" />
			</uni-forms-item>
			<uni-forms-item label="活动开始时间" name="startTime">
				<uni-datetime-picker v-model="activityRequest.startTime"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item label="活动结束时间" name="endTime">
				<uni-datetime-picker v-model="activityRequest.endTime" />
			</uni-forms-item>
			<uni-forms-item label="可参加人员" name="limitId">
				<picker :range="limitNameList" @change="bindPickerChange" :value="index">
					<uni-easyinput v-model="limitNameList[index]" class="uni-input">{{limitNameList[index]}}
					</uni-easyinput>
				</picker>
			</uni-forms-item>
			<uni-forms-item name="activityContent">
				<textarea style="border: 1rpx solid #DCDFE6;" type="text" v-model="activityRequest.activityContent"
					placeholder="请输入活动内容" :maxlength="250" />
			</uni-forms-item>
			<button @click="updateActivity" type="primary">更新活动</button>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				limitIndexList: [],
				limitNameList: [],
				index: 0,
				activityRequest: {
					avatar: null,
					newAvatar: null,
					actId: null,
					activityName: null,
					activityAddress: null,
					startTime: null,
					endTime: null,
					limitId: null,
					activityContent: null,
					funds: 0 // 单位：元
				},
				rules: {
					activityName: {
						rules: [{
							required: true,
							errorMessage: '活动名称不能为空'
						}]
					},
					activityAddress: {
						rules: [{
							required: true,
							errorMessage: '活动地址不能为空'
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '活动开始时间不能为空'
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '活动结束时间不能为空'
						}]
					},
					limitId: {
						rules: [{
							required: true,
							errorMessage: '可参加人员不能为空'
						}]
					},
					activityContent: {
						rules: [{
							required: true,
							errorMessage: '活动内容不能为空'
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad: function(option) {
			this.activityRequest.actId = option.actId;
			this.getLimit();
			this.getActivityInfo();
		},
		methods: {
			getActivityInfo() {
				this.$http.request({
					url: `/organizations/web/activity/detail/${this.activityRequest.actId}`
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.activityRequest.avatar = res.data.actAvatar;
						this.activityRequest.activityName = res.data.actName;
						this.activityRequest.activityAddress = res.data.actAddress;
						this.activityRequest.startTime = res.data.actBeginTime;
						this.activityRequest.endTime = res.data.actEndTime;
						for (var i = 0; i < this.limitIndexList.length; i++) {
							if (res.data.orgLimit.limId == this.limitIndexList[i]) {
								this.activityRequest.limitId = res.data.orgLimit.limId
								this.index = i;
							}
						}
						this.activityRequest.activityContent = res.data.actContent;
						this.activityRequest.funds = res.data.actFunds / 100;
					} else {
						uni.showToast({
							title: '获取活动详情失败',
							icon: 'none'
						});
					}
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.activityRequest.limitId = this.limitIndexList[this.index]
			},
			// 获取限制列表
			getLimit() {
				this.$http.request({
					url: '/organizations/web/activity/limit'
				}).then(res => {
					res = res.data;
					if (res.result) {
						for (var i = 0; i < res.data.length; i++) {
							this.limitIndexList[i] = res.data[i].limId;
							this.limitNameList[i] = res.data[i].limName;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 选择图片
			chooseImg() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.activityRequest.avatar = res.tempFilePaths[0];
						that.activityRequest.newAvatar = res.tempFilePaths[0];
					}
				});
			},
			// 更新活动
			updateActivity() {
				// 金额调整
				var funds = 100 * this.activityRequest.funds;
				this.$refs.form.submit().then(res => {
					this.$http.request({
						url: '/organizations/web/activity/update',
						method: 'POST',
						filePath: this.activityRequest.newAvatar,
						name: 'newAvatar',
						formData: {
							actId: this.activityRequest.actId,
							activityName: this.activityRequest.activityName,
							activityAddress: this.activityRequest.activityAddress,
							startTime: this.activityRequest.startTime,
							endTime: this.activityRequest.endTime,
							limitId: this.activityRequest.limitId,
							activityContent: this.activityRequest.activityContent,
							funds: funds
						},
						type: 'upload'
					}).then(res => {
						res = res.data;
						res = JSON.parse(res)
						if (res.result) {
							uni.showToast({
								title: res.msg,
								duration: 2000
							})
							this.activityRequest.avatar = null;
							this.activityRequest.activityName = null;
							this.activityRequest.activityAddress = null;
							this.activityRequest.startTime = null;
							this.activityRequest.endTime = null;
							this.activityRequest.activityContent = null;
							this.activityRequest.funds = 0;
							setTimeout(function() {
								uni.navigateBack()
							}, 2000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style>
</style>
